<template>
  <div class="experPage">
    <Row>
      <Col span="18" style="background-color: var(--card-body-bgcolor);border-radius: 10px;padding: 30px 0">
        <div class="class-top">
          <div class="class-title-wrap">
            <div class="class-title" v-if="expData.length>0">
              <div
                class="class-title-all"
                :class="{ active: expListText }"
                @click="clickClassText('expList')"
              >
                课件列表
              </div>
              <div class="class-title-line" :class="{ 'line-active': expLine }"></div>
            </div>
            <div style="margin:0 50px" class="class-title" v-if="commentList.length>0">
              <div
                class="class-title-all"
                :class="{ active: commentText }"
                @click="clickClassText('comment')"
              >
                课程评论
              </div>
              <div class="class-title-line" :class="{ 'line-active': commentLine }"></div>
            </div>
            <div class="class-title" :style="commentList.length==0?'margin:0 50px':' '" v-if="videoNotesList.length>0 || notesList.length>0">
              <div
                class="class-title-all"
                :class="{ active: notesText }"
                @click="clickClassText('notes')"
              >
                课程笔记
              </div>
              <div class="class-title-line" :class="{ 'line-active': notesLine }"></div>
            </div>
          </div>
        </div>
        <Divider />
        <div class="guide-wrap" :style="{ height: contentHei }">
          <template v-if="expListText">
            <div class="exp" data-name="课件列表" v-if="showList">
              <Card
                v-for="(exp, index) in expData"
                :key="exp.ecid"
                style="margin-bottom:10px;"
                v-if="flagOldExp"
              >
                <div class="exper">
                  <img
                    class="exp-img"
                    :src="handleImage(exp.topology)"
                    alt=""
                    width="137"
                    height="80"
                    :onerror="defaultImg1"
                  />
                  <div class="exper-info">
                    <div class="exper-name">课件&nbsp;&nbsp;{{ handleNumber(index + 1) }}</div>
                    <div class="exper-name">{{ exp.ecname }}</div>
                    <div class="display-flex">
                      <small>难度:</small>
                      <small>{{ handleDiffcult(exp.difficulty) }}</small>
                      <Divider type="vertical" />
                      <small>可见范围:</small>
                      <small>{{ handleIsPublic(exp.isPublic) }}</small>
                      <Divider type="vertical" />
                      <small>课时:</small>
                      <small>{{ exp.hours }}</small>
                      <Divider type="vertical" />
                      <small>创建时间:</small>
                      <small>{{ exp.createTime }}</small>
                      <Divider type="vertical" />
                      <div class="display-flex">
                        <small>设计师:</small>
                        <Tooltip
                          v-if="exp.designer"
                          transfer
                          max-width="200"
                          :content="exp.designer"
                        >
                          <small class="text-ellipsis" style="width:100px">
                            {{ exp.designer }}
                          </small>
                        </Tooltip>
                      </div>
                      <Divider type="vertical" />
                      <div class="display-flex">
                        <small>标签:</small>
                        <Tooltip
                          transfer
                          max-width="300"
                          :content="
                            exp.labels == 'null' || !exp.labels
                              ? '-'
                              : exp.labels.replaceAll(';', ',')
                          "
                        >
                          <small class="text-ellipsis" style="width:200px">
                            {{
                              exp.labels == 'null' || !exp.labels
                                ? '-'
                                : exp.labels.replaceAll(';', ',')
                            }}
                          </small>
                        </Tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
              <treeCollapse :collapse="collapse" v-if="!flagOldExp" />
            </div>
            <no-data v-if="!showList"></no-data>
          </template>
          <ExpComment
            :experInfo="reciveData"
            :status="setReBtnStatus()"
            v-if="commentText"
          ></ExpComment>
          <ExpNotes :experInfo="reciveData" :status="setReBtnStatus()" v-if="notesText"></ExpNotes>
        </div>
      </Col>
      <Col span="6" style="padding-left: 25px;">
        <div class="class-info-wrap">
          <div style="position: relative;" :style="{ height: rightTopImgHei }">
            <img
              style="width: 100%;height: 100%;border-radius: 10px;"
              :src="handleImage(this.reciveData.courseLogo)"
              :onerror="defaultImg1"
            />
          </div>
          <div class="class-right-info" :style="{ height: rightHei }">
            <Tooltip
              style="font-size: 16px;color: #333;font-weight: 600;width: 100%"
              max-width="200"
              :content="reciveData.ccname"
              placement="top-start"
            >
              <div
                style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;"
              >
                {{ reciveData.ccname }}
              </div>
            </Tooltip>
            <div class="class-right-icon">
              <div class="difficultyIcon"></div>
              <span class="class-right-text">难度：</span>
              <span>{{ handleDiffcult(this.reciveData.difficulty) }}</span>
            </div>
            <div class="class-right-icon">
              <div class="designIcon"></div>
              <span class="class-right-text">设计师：</span>
              <span>{{ this.reciveData.designer }}</span>
            </div>
            <div class="class-right-icon">
              <div class="visibilyIcon"></div>
              <span class="class-right-text">可见范围：</span>
              <span>{{ handleIsPublic(this.reciveData.isPublic) }}</span>
            </div>
            <div class="class-right-icon">
              <div class="desigTimeIcon"></div>
              <span class="class-right-text">设计时间：</span>
              <span>{{ showTimeNotSecond(this.reciveData.createTime) }}</span>
            </div>
            <div class="class-right-icon">
              <div class="desigTimeIcon"></div>
              <span class="class-right-text">课&nbsp;&nbsp;&nbsp;&nbsp;时：</span>
              <span>{{ this.reciveData.hours }}</span>
            </div>
            <div class="class-right-icon_lable">
              <span class="class-right-text" style="margin-left:23px"
                >标&nbsp;&nbsp;&nbsp;&nbsp;签：</span
              >
              <Tooltip
                transfer
                max-width="300"
                :content="
                  reciveData.labels == 'null' || !reciveData.labels
                    ? '-'
                    : reciveData.labels.replaceAll(';', ',')
                "
              >
                <span class="text-ellipsis" style="width:200px">
                  {{
                    reciveData.labels == 'null' || !reciveData.labels
                      ? '-'
                      : reciveData.labels.replaceAll(';', ',')
                  }}
                </span>
              </Tooltip>
              <!-- <span v-if="reciveData.labels">{{reciveData.labels == '' ? '-':reciveData.labels.replaceAll(';',',')}}</span> -->
            </div>
            <div class="class-right-icon">
              <span class="class-right-text" style="margin-left:23px"
                >描&nbsp;&nbsp;&nbsp;&nbsp;述：</span
              >
              <span
                style="color: #999;line-height: 2"
                v-text="reciveData.description || '-'"
              ></span>
              <!--  -->
            </div>
            <div class="rate-box">
                <div class="person-box">
                    <div class="my-score-box">
                        <div style="color: #a9a9a9;">评&nbsp;&nbsp;分</div>
                        <Divider type="vertical" style="height: 45px;" />
                        <div>
                            <div class="score-info">
                                <Rate style="font-size: 18px;" disabled allow-half v-model="scoreAvgStar"/>
                            </div>
                            <div class="score-info">
                                <div class="join-style" style="margin-right: 10px;"><span style="color: #ed4014;">{{scoreCount}}</span>人参与评分</div>
                                <div class="join-style">总评分<span style="color: #ed4014;">{{scoreAvg}}</span>分</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import $ from 'jquery';
import encryption from '@/libs/encryption.js';
import defaultImg from '@/assets/globalIcon/course.jpg';
import { courseDetail, courseExpDetail, getChapter,getCommentList,getNotesList,getScoreAvg } from '@/api/selfStudy/courseExp.js';
import ExpComment from './expComment.vue';
import ExpNotes from './expNotes.vue';
import treeCollapse from './treeCollapse.vue';
import {showTimeNotSecond} from '@/libs/utils';
export default {
  components: { ExpComment, ExpNotes, treeCollapse },
  data() {
    return {
      showTimeNotSecond,
      scoreAvg: 0,
      scoreAvgStar: 0,
      scoreCount: 0,
      USER_ID: '',
      isRootDesigner: false,
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: '0px',
      rightHei: '0px',
      defImg: defaultImg,
      defaultImg1: 'this.src="' + require('../../../assets/globalIcon/course.jpg') + '"',
      rightTopImgHei: 'auto',
      // 接收的数据
      reciveData: {},
      ecid: '',
      // tabs切换
      expListText: true,
      expLine: true,
      commentText: false,
      commentLine: false,
      notesText: false,
      notesLine: false,
      // 收藏
      closeIconSrc: require('../../../assets/exper/close-grey.png'),
      openIconSrc: require('../../../assets/exper/open-grey.png'),
      ueid: '',
      proId: '',
      expData: [],
      showList: false,
      collapse: [],
      flagOldExp: false,
      commentList:[],
      queryCommentInfo:{
				pageIndex:1,
				pageSize:10,
				experimentId:''
			},
      notesInfo: {
        companyId: "",
        content: "",
        courseId: this.$route.query.classId,
        experimentId: "",
        level: 5,
      },
      queryNotesInfo: {
        pageIndex: 1,
        pageSize: 10,
        type: 1,
      },
      queryVideoNotesInfo: {
        pageIndex: 1,
        pageSize: 10,
        type: 2,
      },
      videoNotesList:[],
      notesList:[]
    };
  },
  computed: {
    pageTitle () {
      //当前菜单显示名
      return this.$route.meta.title;
    },
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
  },
  async mounted() {
    $('.experPage .ivu-divider-horizontal').css({
      margin: 0
    });
    $('.ivu-poptip-rel').css('width', '100%');
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    this.ccid = this.$route.query.ccid;
    this.getCourseInfo();
    this.getChapter();
    this.getScoreAvg()
    await this.getCourseExpLists();
    if(this.expData.length>0){
      this.clickClassText('expList')
    }
    this.queryCommentInfo.courseId = this.reciveData.ccid;
    await this.getCommentList();
    if(this.commentList.length>=0 && this.expData.length == 0){
      this.clickClassText('comment')
    }
    this.notesInfo.companyId = this.reciveData.companyId;
    this.notesInfo.courseId = this.reciveData.ccid;
    this.queryNotesInfo.courseId = this.reciveData.ccid;
    this.queryVideoNotesInfo.courseId = this.reciveData.ccid;
    await this.getVideoNotesList()
    await this.getNotesList()
    if(this.expData.length==0&&this.commentList.length==0){
      this.clickClassText('notes')
    }
  },
  beforeDestroy() {
    clearInterval(this.queryStatus);
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === '/course') {
      //to.query.page = this.$route.query.page
      next();
    } else {
      sessionStorage.removeItem('queryObj');
      next();
    }
  },
  updated() {
    //          $('.guidancebookList .guidancebookdiv .guidancebookcontent p').css({
    //              'line-height':2,
    //          })
    //          // 调整说明指导书中图片的路径
    //          let imgs = $('.guidancebookList .guidancebookdiv .guidancebookcontent img')
    //          for(let i=0;i<imgs.length;i++){
    //              let src = $(imgs[i]).attr('src')
    //              $(imgs[i]).css({
    //                  maxWidth:'100%'
    //              })
    //              if(!(src.indexOf('Learn') > -1)){
    //                  $(imgs[i]).attr('src',`/Learn/${src}`)
    //              }
    //          }
  },
  methods: {
    // 获取当前平均评分
    getScoreAvg() {
        getScoreAvg({experimentId: this.ccid}).then(data => {
            if(data.code == 1) {
                this.scoreAvg = data.data.avg
                this.scoreAvgStar = data.data.avg/2
                this.scoreCount = data.data.count
            }else {
                this.$Message.error(data.message)
            }
        })
    },
    async getCommentList(){
      const res = await getCommentList(this.queryCommentInfo)
      this.commentList = res.data.items;
    },
    //获取视频笔记
    async getVideoNotesList() {
      const res = await getNotesList(this.queryVideoNotesInfo)
      this.videoNotesList = res.data.items;
    },
    //获取文本笔记
    async getNotesList() {
      const res = await getNotesList(this.queryNotesInfo)
        this.notesList = res.data.items;
    },
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullWidth = window.fullWidth;
      this.fullHeight = window.fullHeight;
      let hei = 0;
      if (this.fullWidth >= 2400) {
        // 310
        hei = 310;
      }
      if (this.fullWidth > 2200 && this.fullWidth < 2400) {
        // 250
        hei = 250;
      }
      if (this.fullWidth <= 2200 && this.fullWidth >= 1900) {
        // 225
        hei = 225;
      }
      if (this.fullWidth > 1700 && this.fullWidth < 1900) {
        // 200
        hei = 200;
      }
      if (this.fullWidth > 1500 && this.fullWidth <= 1700) {
        // 180
        hei = 180;
      }
      if (this.fullWidth > 1400 && this.fullWidth <= 1500) {
        // 160
        hei = 160;
      }
      if (this.fullWidth <= 1400) {
        // 140   471
        hei = 140;
      }
      this.rightTopImgHei = hei + 'px';
      this.contentHei = this.fullHeight - 221 + 'px';
      this.rightHei = this.fullHeight - 121 - hei + 'px';
    },
    // 获取课程详情
    getCourseInfo() {
      courseDetail(this.ccid)
        .then((data) => {
          if (data.code === 1) {
            let getData = data.data.coursecontent;
            this.reciveData = getData;
            this.$store.commit('addBreadItem', { name: this.reciveData.ccname });
          } else {
            this.$Message.error({
              content: data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 切换标题栏
    clickClassText(type) {
      this.expListText = false;
      this.expLine = false;
      this.notesText = false;
      this.notesLine = false;
      this.commentText = false;
      this.commentLine = false;
      if (type === 'expList') {
        this.expListText = true;
        this.expLine = true;
      } else if (type === 'comment') {
        this.commentText = true;
        this.commentLine = true;
      } else if (type === 'notes') {
        this.notesText = true;
        this.notesLine = true;
      }
    },
    // 图片路径
    handleImage(logo) {
      let src = '';
      if (logo) {
        if (logo.indexOf('Learn') > -1) {
          src = logo;
        } else {
          src = `/Learn/${logo}`;
        }
      } else {
        src = this.defImg;
      }
      return src;
    },
    // 分享状态
    handleIsPublic(type) {
      if (type === 1 || type === '1') {
        return '单位';
      } else if (type === 0 || type === '0') {
        return '个人';
      } else if (type === 2 || type === '2') {
        return '系统';
      }
    },
    // 按钮点击状态
    setReBtnStatus() {
      let userid = this.reciveData.createUserId;
      if (userid === this.USER_ID || this.isRootDesigner) {
        return false;
      } else {
        return true;
      }
    },
    // 困难程度
    handleDiffcult(val) {
      switch (val) {
        case 'Simple':
          return '简单';
          break;
        case 'Medium':
          return '中等';
          break;
        case 'Hard':
          return '较难';
          break;
      }
    },
    // 序号
    handleNumber(val) {
      let str = '';
      switch (val) {
        case 1:
          str = '一';
          break;
        case 2:
          str = '二';
          break;
        case 3:
          str = '三';
          break;
        case 4:
          str = '四';
          break;
        case 5:
          str = '五';
          break;
        case 6:
          str = '六';
          break;
        case 7:
          str = '七';
          break;
        case 8:
          str = '八';
          break;
        case 9:
          str = '九';
          break;
        case 10:
          str = '十';
          break;
        case 11:
          str = '十一';
          break;
        case 12:
          str = '十二';
          break;
        case 13:
          str = '十三';
          break;
        case 14:
          str = '十四';
          break;
        case 15:
          str = '十五';
          break;
        case 16:
          str = '十六';
          break;
        case 17:
          str = '十七';
          break;
        case 18:
          str = '十八';
          break;
        case 19:
          str = '十九';
          break;
        case 20:
          str = '二十';
          break;
        default:
          srt = val;
      }
      return str;
    },
    // 获取课件数据 -- 新-liqing-0103
    getCourseExpLists() {
      return new Promise((resolve,reject) => {
        let _this = this;
      courseExpDetail(_this.ccid)
        .then((data) => {
          if (data.code == 1 && data.data) {
            _this.expData = data.data;
            _this.expData.sort((a, b) => {
              return a.orderNo - b.orderNo;
            });
            if (data.data.length > 0) {
              this.showList = true;
              this.clickClassText('expList')
            } else {
              this.showList = false;
            }
          } else {
            _this.expData = [];
            this.showList = false;
          }
          console.log(data);
          resolve()
        })
        .catch((err) => {
          _this.$Message.error('获取课件列表失败，请稍后再式');
          this.showList = false;
        });
      })
    },
    // 获取课件新数据 树型
    getChapter() {
      getChapter(this.ccid)
        .then((res) => {
          if (res.code == 1) {
            if (res.data.name == '该课程未绑定章节') {
              this.flagOldExp = true;
            } else {
              if (res.data) {
                this.flagOldExp = false;
                let resList = res.data.courseexpchapterDtoList;
                resList.sort((a, b) => {
                  return a.orderby - b.orderby;
                });
                resList.forEach((item) => {
                  item.courseexpchapterDtoList.forEach((item2) => {
                    //orderno
                    item2.expOutDtoList = this.expSort(item2.expOutDtoList, 'orderNo');
                  });
                  item.isShow = false;
                  item.courseexpchapterDtoList = this.expSort(
                    item.courseexpchapterDtoList,
                    'orderby'
                  );
                });
                this.collapse = resList;
              } else {
                this.$Message.warning(res.message + '，先启用课程');
              }
            }
            if (this.collapse.length > 0) {
              this.showList = true;
            } else {
              this.showList = false;
            }
          } else {
            this.collapse = [];
            this.showList = false;
          }
        })
        .catch((error) => {
          _this.$Message.error('获取课件列表失败，请稍后再式');
          this.showList = false;
        });
    },

    // 排序
    expSort(list, type) {
      if (type == 'orderby') {
        return list.sort((a, b) => {
          return a.orderby - b.orderby;
        });
      } else {
        return list.sort((a, b) => {
          return a.orderNo - b.orderNo;
        });
      }
    },

    // 返回上一层
    returnCourse() {
      this.$router.push({
        name: 'course',
        query: {
          page: this.$route.query.page
        }
      });
    }
  }
};
</script>
<style scoped>
.addressIcon {
  display: inline-block;
  height: 14px;
  width: 12px;
  background: url('../../../assets/exper/addressIcon.png') no-repeat center;
  background-size: 100% 100%;
  margin-bottom: -1px;
}
.class-top {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active {
  color: var(--default-color);
  font-size: 22px;
  font-weight: 600;
}
.class-title-line {
  background-color: transparent;
  height: 3px;
  border-radius: 1px;
  width: 50px;
  margin: 20px 0 3px 0;
}
.line-active {
  background-color: var(--default-color);
}
.openCloseIcon {
  cursor: pointer;
}
.openCloseIcon:hover {
  color: blue;
}
.guide-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 20px 0px;
}
/deep/.guide-wrap .ivu-card-body {
  padding: 8px !important;
}

.exp {
  width: 100%;
  overflow: hidden;
}
.class-right-info {
  background-color: var(--card-body-bgcolor);
  padding: 30px 20px 0 20px;
  margin-top: 20px;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.difficultyIcon {
  display: inline-block;
  height: 16px;
  width: 18px;
  background: url('../../../assets/exper/deficut.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.designIcon {
  display: inline-block;
  height: 13px;
  width: 18px;
  background: url('../../../assets/exper/avtar.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.visibilyIcon {
  display: inline-block;
  height: 9px;
  width: 18px;
  background: url('../../../assets/exper/see.png') no-repeat center;
  background-size: 15px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.desigTimeIcon {
  display: inline-block;
  height: 11px;
  width: 18px;
  background: url('../../../assets/exper/time-icon.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.class-right-icon {
  color: darkgrey;
  line-height: 2;
  display: flex;
  align-items: center;
}
.class-right-icon_lable {
  color: darkgrey;
  line-height: 2;
  display: flex;
}
.class-right-text {
  min-width: 60px;
  width: 60px;
  display: inline-block;
  text-align-last: justify;
}
.exper {
  display: flex;
}
.exp-img {
  margin-right: 20px;
}
.exper-name {
  font-size: 16px;
  font-weight: bold;
}
.exper-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 16px;
}
/*.defGraphWrap{
        width: 157px;
        height: 167px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
    }
    .defGraph{
        height: 126px;
        width: 157px;
        background: url("../../../assets/globalIcon/defGraph.png") no-repeat center center;
        background-size: 157px 126px;
    }
    .graphText{
        color: #888;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }*/
  .rate-box {
      display: flex;
      margin-bottom: 10px;
  }
  .person-box {
      flex: 1;
  }
  .my-score-box {
      display: flex;
      align-items: center;
      padding-left: 23px;
  }
  .join-style {
      font-size: 12px;
      color: #999;
  }
  .score-info {
      display: flex;
      align-items: center;
  }
</style>
